<template>
    <div id="addTeacher">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="cancel()">
                教师管理</span>/ 添加教师
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">教师信息</span>
                <el-button class="save" type="primary" @click="addTeacherList()">保存</el-button>
                <el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
            </div>
            <el-input class="inp" placeholder="请输入教师手机号" icon="search" v-model="input" @keyup.enter.native="searchTeacher" :on-icon-click="searchTeacher"></el-input>

            <div class="serchList" v-if='name'>
                <ul>
                    <li>教师姓名：{{name}}</li>
                    <li>教师手机：{{username}}</li>
                    <li>教职工号：{{campusId}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                phone: "",
                input: "",
                name: "",
                username: "",
                uid: "",
                campusId: ''
            };
        },
        computed: mapState({ user: state => state.user }),

        methods: {
            //取消
            cancel() {
                let sid = this.$util.getUrlParam("sid");
                let pageNum = this.$util.getUrlParam("pageNum");
                let condition = this.$util.getUrlParam("condition");
                let params = {
                    sid, pageNum, condition
                };

                this.$util.refreshTo("/#/teacherManage", params);
            },

            //添加教师
            addTeacherList() {
                this.list = [];
                if (!this.name) {
                    return;
                }
                this.$http({
                    url: this.$util.domain + "/campusadminapi/v1/teacher/add",
                    method: "POST",
                    body: JSON.stringify({
                        uid: this.uid,
                        name: this.name,
                        username: this.username
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.$util.successMsg("添加教师成功");
                        location.href = "/#/teacherManage";
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            },
            //搜索教师
            searchTeacher() {
                if (!this.input) {
                    return;
                }

                this.$http({
                    url: this.$util.domain + "/teacher/search",
                    method: "GET",
                    params: {
                        phone: this.input
                    }
                }).then(response => {
                    if (response.data.type == 200) {
                        let user = response.data.infos.user;
                        if (user) {
                            this.uid = user.uid;
                            this.name = user.name;
                            this.username = user.username;
                            this.campusId = user.campusId;
                        } else {
                            this.$util.errorMsg(response.data.msg);
                        }
                    } else {
                        this.$util.errorMsg(response.data.msg);
                    }
                });
            }
        }
    };
</script>

<style scoped>
    #addTeacher {
        padding-top: 80px;
        height: calc(100% - 130px);
        overflow: hidden;
    }

    #addTeacher .list {
        height: calc( 100% - 50px);
    }

    .title {
        color: #0398ff;
    }

    .infoHead {
        width: 100%;
        height: 36px;
        background-color: #ccc;
        text-indent: 30px;
        line-height: 36px;
    }

    .phone {
        width: 40%;
        margin-left: 40px;
    }

    .inp {
        width: 30%;
        display: inline-block;
    }

    .list .serchList {
        width: 30%;
        height: 90px;
        margin-top: 10px;
    }

    .serchList span {
        font-size: 14px;
    }

    .serchList ul {
        font-size: 14px;
        list-style: none;
    }

    .serchList li {
        height: 30px;
        line-height: 30px;
        list-style: none;
    }
</style>